
<template>

  <swiper class="swiper" :options="swiperOption">
         <div class="del" @click="goBack(-1)"></div>
    <swiper-slide  v-for="(item,index) in imgArr" :key="index" >
         
      <div class="swiper-zoom-container " >
         
        <img :src="item.img.url">
       
      </div>
    </swiper-slide>
    <!-- <swiper-slide>
      <div class="swiper-zoom-container">
         <img src="../assets/images/example/2.jpg">
           
      </div>
    </swiper-slide>
    <swiper-slide>
      <div class="swiper-zoom-container">
        <img src="../assets/images/example/3.jpg">
         
      </div>
       
    </swiper-slide> -->
    <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>

  </swiper>
 


    
</template>

<script>
export default {
  components: {},
  data() {
    return {
      swiperOption: {
        zoom: true,
        pagination: {
          el: ".swiper-pagination"
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      imgArr: [
        {
          img: {
         url:require("../assets/images/example/1.jpg")
          }
        },
        {
          img: {
        url:require("../assets/images/example/2.jpg")
          }
        },
        {
          img: {
      url:require("../assets/images/example/3.jpg")
          }
        },
        {
          img: {
        url:require("../assets/images/example/4.jpg")
          }
        },
        {
          img: {
         url:require("../assets/images/example/5.jpg")
          }
        },
        {
          img: {
           url:require("../assets/images/example/6.jpg")
          }
        },
        {
          img: {
        url:require("../assets/images/example/7.jpg")
          }
        }
      ]
    };
  },
  methods: {
    goBack: function() {
      this.$router.go(-1);
    }
  }
};
</script>

<style  scoped>
@import url("../assets/font/iconfont.css");
@import url("../assets/css/base.css");
.preview {
  /* position: relative; */
}
.swiper {
  position: relative;
  height: 100%;
  padding: 50px 100px;
  background-color: #000000;
}
.swiper .swiper-slide {
  background: #000000;
}
.swiper-button-prev,
.swiper-button-next {
  padding: 0 80px;
}
/deep/ .del {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 35px;
  top: -40px;
}
.del::before {
  content: "\e62d";
  font-family: "iconfont";
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 50px;
}
</style>